<template>
 <div class="problem">
   <h3 class="title mb15">
     <span class="t">常见问题</span>
<!--     <router-link :to="`../list/${itemId}?key=常见问题`">查看更多 <RightOutlined /></router-link>-->
   </h3>

   <Tabs type="card" v-model:activeKey="activeKey">
     <TabPane :key="x" :tab="i.data.itemName" v-for="(i,x) in  tabItemList">
       <newsList :bannerId="itemId" :itemId="i.data.itemId" :showPagination="true"> </newsList>
     </TabPane>

   </Tabs>

 </div>
</template>

<script lang="ts" >
import {defineComponent, inject, onMounted, ref} from "vue";
import { Row, Col  , Tabs } from "ant-design-vue";
import { RightOutlined } from '@ant-design/icons-vue';
import {findOneDataObj, parseTime} from '/@/utils';
import { newsList } from '/@/components/newsList';
import {getItemTreeApi} from "/@/api/theme";



export default defineComponent({
  name: "problem",
  components: { Row, Col ,Tabs, TabPane: Tabs.TabPane, newsList , RightOutlined},
  setup() {
    const itemId = inject('itemId') as string;
    const tabItemList = ref([]);
    const getItemTree = async () => {
      const Param = { includeSelf:false, itemId:itemId }
      let { success , data } = await getItemTreeApi(Param);
      if(success){
        let noticeObj = findOneDataObj(data,'常见问题');
        tabItemList.value = noticeObj.children;
      }
    }

    const init = () => {
      getItemTree();
    }
    onMounted(init)

    return {
       parseTime,activeKey: ref(0) , tabItemList ,itemId
    }


  }
});
</script>

<style lang="less" scoped>

.problem{
  .title{
    span.t{
      display: inline-block;
      padding-left: 10px;
      font-size: 20px;
      line-height: 1;
      border-left: 4px solid #2E77D6;
    }

    a{
      float: right;
      font-size: 14px;
      transform: translateY(6px);

      .anticon{
        font-size: 14px;
      }
    }
  }
}

::v-deep(.ant-tabs-card) {
  background: white;

  .ant-tabs-bar {
    margin: 0;
  }

  .ant-tabs-card-content{
    padding: 10px 40px 30px;
    border: 1px solid #e8eaee;
    border-top: none;

  }

  .ant-tabs-nav-container {
    height: 58px !important;
    background: #f5f5f6;
    border: 1px solid #e8eaee;

    .ant-tabs-tab {
      height: auto !important;
      padding: 18px 40px !important;
      margin: 0 !important;
      font-size: 16px;
      line-height: 22px !important;
      background: #f5f5f6 !important;
      border: 0 !important;

      &.ant-tabs-tab-active {
        color: @blue;
        background: @white !important;
      }
    }
  }
}
</style>
